<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar  />
      <div class="main-wrap">
          <main-sidebar />
          <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
            <main-content />
          </div>
      </div>
      <!-- <div class="site-content__wrapper"  v-if="!$store.state.common.contentIsNeedRefresh" 
      :class="'site-content__wrapper--' + layoutSkin"
      :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content  />
      </div> -->
    </template>
    <function-button ref="toolBtn" />
  </div>
</template>
<style lang="scss" scoped>
.site-content__wrapper{
  // background-image: url('/static/images/base/home-bg.png');
  // background-repeat:no-repeat no-repeat;
  // background-size: 100% 100%;
}
</style>
<script>
import FunctionButton from './map/components/function-button';
import MainNavbar from '../components/navbar/main-navbar';
import MainSidebar from '../components/slidebar/main-sidebar';
import MainContent from '../components/content/main-content';
export default {
  provide() {
    return {
      // 刷新
      refresh() {
        this.$store.commit('common/updateContentIsNeedRefresh', true);
        this.$nextTick(() => {
          this.$store.commit('common/updateContentIsNeedRefresh', false);
        });
      }
    };
  },
  data() {
    return {
      loading: false,
      show: false,
      menuurl: []
    };
  },
  components: {
    MainNavbar,
    MainSidebar,
    MainContent,
    FunctionButton
  },
  watch: {
    layoutSkin: {
      handler(skin) {
        document.body.className = ' system-skin--' + skin;
      },
      immediate: true
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    },
    topMenuList: {
      get() { return this.$store.state.common.topMenuList; },
      set(val) { this.$store.commit('common/updateTopMenuList', val); }
    },
    documentClientHeight: {
      get() { return this.$store.state.common.documentClientHeight; },
      set(val) { this.$store.commit('common/updateDocumentClientHeight', val); }
    },
    sidebarFold: {
      get() { return this.$store.state.common.sidebarFold; }
    },
    userId: {
      get() { return this.$store.state.user.id; },
      set(val) { this.$store.commit('user/updateId', val); }
    }
  },
  created() {
    // if (!this.userInfo) {
    //   this.getUserInfo();
    // }
    // this.topMenuList = JSON.parse(sessionStorage.getItem('menuList') || '[]');
    // if (this.$route.name === 'main') { // 没有路由地址
    //   this.findFirstMenu(this.topMenuList);
    //   this.$router.push({ path: this.menuurl[0] });
    // }
  },
  mounted() {
    this.resetDocumentClientHeight();
  },
  methods: {
    // 重置窗口可视高度
    resetDocumentClientHeight() {
      this.documentClientHeight = document.documentElement['clientHeight'];
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight'];
      };
    },
    findFirstMenu(menuList = []) {
      var menuurl = [];
      var temp = [];
      for (var i = 0; i < menuList.length; i++) {
        var item = menuList[i];
        if (item.children && item.children.length > -1) {
          temp = temp.concat(item.children);
        }
        if (item.menuurl) {
          menuurl.push(item.menuurl);
        }
      }
      if (temp.length > 1) {
        this.findFirstMenu(temp);
      } else {
        this.menuurl = menuurl;
      }
    },
    getUserInfo() {
      const authToken = this.$cookie.get('token');
      const params = {
        url: `/service-base/user/getUserByToken/${authToken}`,
        type: 'get',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { data, success } = resp;
        if (success) {
          this.$store.commit('user/updateAvatar', data.avatar); // 刷新头像
          this.$store.commit('user/updateUserInfo', data);
        }
      });
    }
  }
};
</script>
